<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>教室管理 - 智慧排课系统</title>
    <!-- icon -->
    <link rel="shortcut icon" th:href="@{/static/picture/favicon.ico}" />
    <!-- BEGIN:CSS Assets-->
    <link rel="stylesheet" th:href="@{static/css/app.css}" />
    <!-- END:CSS Assets-->
</head>
<body>

<div class="flex">
    <!-- 根据用户类型返回操作侧边栏 -->
    <div th:replace="~{commons/menu::${session.userType}(active='classroomManage', activeli='classroomManage') }"></div>
    <!-- BEGIN:Content -->
    <div class="content">
        <!-- BEGIN:Top Bar -->
        <div class="top-bar">
            <!-- BEGIN:Breadcrumb -->
            <div class="-intro-x breadcrumb mr-auto hidden sm:flex">
                <a href="" class="">应用</a>
                <i data-feather="chevron-right" class="breadcrumb__icon"></i>
                <a href="" class="breadcrumb--active">教学楼管理</a>
            </div>
            <!-- END:Breadcrumb --><!-- BEGIN:Search -->
            <div class="intro-x relative mr-3 sm:mr-6">
                <div class="search hidden sm:block">
                    <input type="text" class="search__input input placeholder-theme-13" placeholder="Search...">
                    <i data-feather="search" class="search__icon"></i>
                </div>
                <a class="notification sm:hidden" href="">
                    <i data-feather="search" class="notification__icon"></i>
                </a>
                <div class="search-result">
                    <div class="search-result__content">
                        <div class="search-result__content__title">
                            页面
                        </div>
                        <div class="mb-5">
                            <a href="" class="flex items-center">
                                <div class="w-8 h-8 bg-theme-18 text-theme-9 flex items-center justify-center rounded-full">
                                    <i class="w-4 h-4" data-feather="inbox"></i>
                                </div>
                                <div class="ml-3">
                                    系统信息
                                </div>
                            </a>
                        </div>
                        <div class="search-result__content__title">
                            用户
                        </div>
                        <div class="mb-5">
                            <a href="" class="flex items-center mt-2">
                                <div class="w-8 h-8 image-fit">
                                    <img alt="Midone Tailwind HTML Admin Template" class="rounded-full" src="static/picture/profile-14.jpg">
                                </div>
                                <div class="ml-3">
                                    小小怪
                                </div>
                                <div class="ml-auto w-48 truncate text-gray-600 text-xs text-right">
                                    xiaoxiaoguai@gmail.com
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END:Notifications --><!-- BEGIN:Account Menu -->
            <div class="intro-x relative mr-3 sm:mr-6" th:text=" '欢迎回来！' + ${session.NickName}"></div>
            <div th:replace="~{commons/info::${session.userType}}"></div>
            <!-- END:Account Menu -->
        </div>
        <h2 class="intro-y text-lg font-medium mt-10">教室列表</h2>

        <div class="intro-y col-span-12 flex flex-wrap sm:flex-no-wrap items-center mt-2">
            <a class="button text-white bg-theme-1 shadow-md mr-2" type="button" data-toggle="modal" data-target="#academic_building_save_modal" >添加教室</a>
            <div class="modal" id="academic_building_save_modal">
                <form th:action="@{/classroom/save}" method="post" class="modal__content">
                    <div class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200">
                        <h2 class="font-medium text-base mr-auto">添加</h2>
                    </div>
                    <div class="p-5 grid grid-cols-12 gap-4 row-gap-3">
                        <div class="col-span-12 sm:col-span-6">
                            <label>教室代码</label>
                            <input type="text" class="input w-full border mt-2 flex-1" name="jsdh" />
                        </div>
                        <div class="col-span-12 sm:col-span-6">
                            <label>教室名称</label>
                            <input type="text" class="input w-full border mt-2 flex-1" name="jsmc"/>
                        </div>
                        <div class="col-span-12 sm:col-span-6">
                            <label>状态(默认启用)</label>
                            <select class="input w-full border mt-2 flex-1" name="jszt">
                                <option value="启用" selected>启用</option>
                                <option value="禁用">禁用</option>
                            </select>
                        </div>
                        <div class="col-span-12 sm:col-span-6">
                            <label>教室类型(默认普通教室)</label>
                            <select class="input w-full border mt-2 flex-1" name="jslx">
                                <option value="普通教室" selected>普通教室</option>
                                <option value="实验室">实验室</option>
                            </select>
                        </div>
                        <div class="col-span-12 sm:col-span-6">
                            <label>教学楼名称</label>
                            <select class="input w-full border mt-2 flex-1" name="jxlmc">
                                <option th:each="academic_building:${academic_buildingList}"
                                        th:value="${academic_building.id}"
                                        th:text="${academic_building.jxlmc} + ' ' + ${academic_building.jxldh} "></option>
                            </select>
                        </div>
                    </div>
                    <div class="px-5 py-3 text-right border-t border-gray-200">
                        <button data-dismiss="modal" type="button" class="button w-20 border text-gray-700 mr-1">取消</button>
                        <button data-dismiss="modal" type="submit" class="button w-20 bg-theme-1 text-white">确认添加</button>
                    </div>
                </form>
            </div>
            <div class="dropdown relative">
                <button class="dropdown-toggle button px-2 box text-gray-700"><span class="w-5 h-5 flex items-center justify-center"><i class="w-4 h-4" data-feather="plus"></i></span></button>
                <div class="dropdown-box mt-10 absolute w-40 top-0 left-0 z-20">
                    <div class="dropdown-box__content box p-2">
                        <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md">
                            <i data-feather="printer" class="w-4 h-4 mr-2"></i>导出打印</a>
                        <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md">
                            <i data-feather="file-text" class="w-4 h-4 mr-2"></i>导出为Excel </a>
                        <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md">
                            <i data-feather="file-text" class="w-4 h-4 mr-2"></i>导出为PDF </a>
                    </div>
                </div>
            </div>
            <div class="hidden md:block mx-auto text-gray-600"></div>
            <div class="w-full sm:w-auto mt-3 sm:mt-0 sm:ml-auto md:ml-0">
                <form th:action="@{/classroom}" class="w-56 relative text-gray-700">
                    <input type="text" class="input w-56 box pr-10 placeholder-theme-13" placeholder="Search..." name="searchParam"/>
                    <div class="w-4 h-4 absolute my-auto inset-y-0 mr-3 right-0" >
                        <i class="w-4 h-4" data-feather="search"></i>
                        <input type="submit" value=""/>
                    </div>
                </form>
            </div>
        </div>

        <div class="grid grid-cols-12 gap-6 mt-5">
            <!--  左边教学楼选择栏  -->
            <div class="col-span-12 lg:col-span-3 xxl:col-span-2">
                <!-- BEGIN:Inbox Menu -->
                <div class="intro-y box bg-theme-1 p-5 mt-6"  style="z-index: 1 !important;">
                    <button type="button" class="button button--lg flex items-center justify-center text-gray-700 w-full bg-white mt-2">
                        教学楼列表
                    </button>
                    <div class="border-t border-theme-3 mt-6 pt-6 text-white">
                        <a th:each="academic_building:${academic_buildingList}"
                           th:href="@{/classroom} + '?academic_building_ID=' + ${academic_building.id}"
                           th:class="${academic_building_ID} == ${academic_building.id} ? 'flex items-center px-3 py-2 rounded-md bg-theme-22 font-medium' :
                              'flex items-center px-3 py-2 mt-2 rounded-md' " >
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star w-4 h-4 mr-2">
                                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                            </svg>
                            [[ ${academic_building.jxlmc} + '   ' + ${academic_building.jxldh} ]]
                        </a>
                    </div>
                </div>
                <!-- END:Inbox Menu -->
            </div>
            <!--  右边列表选择栏  -->
            <div class="intro-y col-span-10 flex flex-wrap flex-col sm:flex-no-wrap items-center mt-2">
                <table class="table table-report intro-y inbox box mt-5">
                    <thead>
                    <tr>
                        <th class="whitespace-no-wrap">教室图片</th>
                        <th class="text-center whitespace-no-wrap">教室编号</th>
                        <th class="text-center whitespace-no-wrap">教室代码</th>
                        <th class="text-center whitespace-no-wrap">教室名称</th>
                        <th class="text-center whitespace-no-wrap">教学楼名称</th>
                        <th class="text-center whitespace-no-wrap">教室类型</th>
                        <th class="text-center whitespace-no-wrap">状态</th>
                        <th class="text-center whitespace-no-wrap">操作</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr class="intro-x" th:each="classroom:${Classrooms.list}">
                        <td class="w-40 text-center whitespace-no-wrap">
                            <div class="flex">
                                <div class="w-10 h-10 image-fit zoom-in">
                                    <img alt="favicon" class="tooltip rounded-full" th:src="@{static/image/school.png}" title="教室图片" />
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="text-center whitespace-no-wrap">
                                [[ ${classroom.id} ]]
                            </div>
                        </td>
                        <td class="text-center whitespace-no-wrap">
                            <div class="font-medium whitespace-no-wrap">
                                [[ ${classroom.jsdh} ]]
                            </div>
                        </td>
                        <td class="text-center whitespace-no-wrap">
                            <div class="font-medium whitespace-no-wrap">
                                [[ ${classroom.jsmc } ]]
                            </div>
                        </td>
                        <td class="text-center whitespace-no-wrap">
                            <div class="font-medium whitespace-no-wrap">
                                [[ ${classroom.jxlmc } ]]
                            </div>
                        </td>
                        <td class="text-center whitespace-no-wrap">
                            <div class="font-medium whitespace-no-wrap">
                                [[ ${classroom.jslx } ]]
                            </div>
                        </td>
                        <td class="text-center">
                            <a th:href="@{/classroom/updataState/}+${classroom.id}"
                               th:class="${classroom.jszt} == '启用' ?
                                   'flex items-center justify-center strong text-theme-9': 'flex items-center justify-center strong text-theme-6' ">
                                <i data-feather="check-square" class="w-4 h-4 mr-2"></i>
                                [[ ${classroom.jszt } ]]
                            </a>
                        </td>
                        <td class="table-report__action w-56">
                            <div class="flex justify-center items-center">
                                <a data-toggle="modal" th:data-target="'#classroom_edit_modal' + ${classroom.id}" class="flex items-center mr-3 text-theme-38" href="javascript:;">
                                    <i data-feather="check-square" class="w-4 h-4 mr-1"></i>
                                    修改
                                    <div class="modal" th:id="'classroom_edit_modal' + ${classroom.id}">
                                        <form th:action="@{/classroom/update}" method="post" class="modal__content">
                                            <div class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200">
                                                <h2 class="font-medium text-base mr-auto">编辑</h2>
                                            </div>
                                            <div class="p-5 grid grid-cols-12 gap-4 row-gap-3">
                                                <div class="col-span-12 sm:col-span-6">
                                                    <label>编号</label>
                                                    <input type="text" readonly="readonly" class="input w-full border mt-2 flex-1" th:value="${classroom.id}" name="id" />
                                                </div>
                                                <div class="col-span-12 sm:col-span-6">
                                                    <label>教室代码</label>
                                                    <input type="text" class="input w-full border mt-2 flex-1" th:value="${classroom.jsdh}" th:placeholder="${classroom.jsdh}" name="jsdh" />
                                                </div>
                                                <div class="col-span-12 sm:col-span-6">
                                                    <label>教室名称</label>
                                                    <input type="text" class="input w-full border mt-2 flex-1" th:value="${classroom.jsmc}" th:placeholder="${classroom.jsmc}" name="jsmc"/>
                                                </div>
                                                <div class="col-span-12 sm:col-span-6">
                                                    <label>所在教学楼名称</label>
                                                    <select class="input w-full border mt-2 flex-1" name="jxlmc">
                                                        <option th:value="${classroom.jxlmc}" selected>[[ ${classroom.jxlmc} ]]</option>
                                                        <option th:each="academic_building:${academic_buildingList}"
                                                                th:value="${academic_building.id}"
                                                                th:text="${academic_building.jxlmc} + ' ' + ${academic_building.jxldh} "></option>
                                                    </select>
                                                </div>
                                                <div class="col-span-12 sm:col-span-6">
                                                    <label>教室类型(默认普通教室)</label>
                                                    <select class="input w-full border mt-2 flex-1" name="jslx">
                                                        <option value="普通教室" selected>普通教室</option>
                                                        <option value="实验室">实验室</option>
                                                    </select>
                                                </div>
                                                <div class="col-span-12 sm:col-span-6">
                                                    <label>状态</label>
                                                    <select class="input w-full border mt-2 flex-1" name="jszt">
                                                        <option value="启用" selected>启用</option>
                                                        <option value="禁用">禁用</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="px-5 py-3 text-right border-t border-gray-200">
                                                <button data-dismiss="modal" type="button" class="button w-20 border text-gray-700 mr-1">取消</button>
                                                <button data-dismiss="modal" type="submit" class="button w-20 bg-theme-1 text-white">确认保存</button>
                                            </div>
                                        </form>
                                    </div>
                                </a>
                                <a data-toggle="modal" th:data-target="'#delete-modal' + ${classroom.id}" class="flex items-center text-theme-6" href="javascript:;">
                                    <i data-feather="trash-2" class="w-4 h-4 mr-1"></i>
                                    删除
                                    <div class="modal" th:id="'delete-modal' + ${classroom.id}">
                                        <div class="modal__content">
                                            <div class="p-5 text-center" style="margin: auto">
                                                <i data-feather="x-circle" class="w-16 h-16 text-theme-6 mx-auto mt-3"></i>
                                                <div class="text-3xl mt-5">
                                                    确认要删除该条记录吗?
                                                </div>
                                                <div class="text-gray-600 mt-2">
                                                    是否确实要删除这些记录？此过程无法撤消。
                                                </div>
                                            </div>
                                            <div class="px-5 pb-8 text-center">
                                                <a data-dismiss="modal" class="button w-24 border text-gray-700 mr-1" style="margin-right: 50px">取消</a>
                                                <a th:href="@{/classroom/delete/} + ${classroom.id} " data-dismiss="modal" class="button w-24 bg-theme-6 text-white">确认删除</a>
                                            </div>
                                        </div>
                                    </div>
                                </a>

                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <!--  底部分页按钮  -->
                <div style="width: 100%;" th:replace="~{commons/pageInfo::pageInfoLink(
                    pageInfo=${pageInfo},
                    pageName='classroom',
                    linkName='academic_building_ID',
                    linkNum=${academic_building_ID}
                ) }"></div>
            </div>
        </div>

    </div>

</div>

<!-- BEGIN:JS Assets-->
<script th:src="@{static/js/js.js}"></script>
<script th:src="@{static/js/app.js}"></script>
<!-- END:JS Assets-->

</body>
</html>